<template>
  <div>
    <el-divider content-position="left" >
      <span class="title">工序统计</span>
    </el-divider>
    <el-table
      v-loading="loading"
      element-loading-text="数据加载中..."
      :data="dataExhibit"
      border
      style="height: 200px"
      @filter-change="filterChange"
      @sort-change="sortChange"
    >
      <el-table-column label="统计项" prop="StatisticName"></el-table-column>
      <el-table-column
        label="统计数据"
        prop="Count"
        column-key="Count"
        sortable
        :sort-method="() => sortBy"
        :filters="[{ text: '筛选非零项', value: 'NotZero' }]"
        filter-placement="bottom-end"
      ></el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 10, 15]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 10px"
    />
  </div>
</template>
<script setup>
import { deepClone } from "@/utils/index.js";
import { onMounted } from "vue";
const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [],
  },
});
const state = reactive({
  currentPage: 1,
  pageSize: 4,
  size: "default",
  disabled: false,
  background: false,
  total: 0,
  dataOrigin: [],
  dataExhibit: [],
  loading: true,
  noZero: false,
  sortBy: 0,
});
const {
  currentPage,
  total,
  pageSize,
  size,
  disabled,
  background,
  dataOrigin,
  dataExhibit,
  loading,
  noZero,
  sortBy,
} = toRefs(state);

watch(
  () => props.dataSource,
  (newVal) => {
    dataOrigin.value = deepClone(newVal);
    dataExhibit.value = newVal.slice(0, pageSize.value);
    total.value = newVal.length;
    loading.value = false;
    // dataSource.value = localStorage.getItem('trackList')
  },
  {
    // immediate: true,
  }
);
const handleSizeChange = (val) => {
  pageSize.value = val;
  dataExhibit.value = throughSort(throughFilter(dataOrigin.value)).slice(
    (currentPage.value - 1) * val,
    currentPage.value * val
  );
  total.value = throughSort(throughFilter(dataOrigin.value)).length;
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  dataExhibit.value = throughSort(throughFilter(dataOrigin.value)).slice(
    (val - 1) * pageSize.value,
    val * pageSize.value
  );
  total.value = throughFilter(dataOrigin.value).length;
};
const throughFilter = (data) => {
  if (noZero.value) return data.filter((item) => item.Count.split("(")[0] != 0);
  else return data;
};
const throughSort = (data) => {
  switch (sortBy.value) {
    //升序
    case 1:
      return data.sort((a, b) => {
        let aNum = +a.Count.split("(")[0];
        let bNum = +b.Count.split("(")[0];
        return bNum - aNum;
      });
    //降序
    case -1:
      return data.sort((a, b) => {
        let aNum = +a.Count.split("(")[0];
        let bNum = +b.Count.split("(")[0];
        return aNum - bNum;
      });
    //恢复
    case 30:
      return data;
    default:
      return data;
  }
};
const filterChange = (filter) => {
  if (filter.Count.includes("NotZero")) {
    noZero.value = true;
  } else {
    noZero.value = false;
  }
  handleCurrentChange(currentPage.value);
  // console.log(value, row)
  // dataExhibit.value = dataOrigin.value.filter(
  //   (item) => item.Count.split("(")[0] != 0
  // );
};
const sortChange = (sort) => {
  switch (sort.order) {
    case "ascending":
      sortBy.value = 1;
      break;
    case "descending":
      sortBy.value = -1;
      break;
    case null:
      sortBy.value = 0;
      break;
    default:
      sortBy.value = 0;
  }
  handleCurrentChange(currentPage.value);
};
</script>
<style></style>
